<template>
  <div class="p-24">
    <div class="card-box p-40">
      <div class="d-flex grid-gap15 flex-column a-center j-center mb-30">
        <img :src="detail.image" alt="" />
        <div class="d-flex">
          <span class="label">设备机器码:</span>
          <span class="val">{{ detail.deviceSn }}</span>
        </div>
        <div class="d-flex">
          <span class="label">设备编号:</span>
          <span class="val">{{ detail.deviceNo }}</span>
        </div>
      </div>
      <div class="d-flex mb-16">
        <span class="label">设备激活时间:</span>
        <span class="val">{{ detail.activeTime }}</span>
      </div>
      <div class="d-flex j-sb">
        <div class="d-flex flex-column grid-gap15">
          <div class="d-flex">
            <span class="label">持续在线时间:</span>
            <span class="val">{{ detail.timeStr || "--" }}</span>
          </div>
          <div class="d-flex">
            <span class="label">在线情况:</span>
            <span class="val" :class="detail.onlineStatus != 1 && 'error'">{{
              detail.onlineStatus == 0 ? "在线" : "离线"
            }}</span>
          </div>
          <div class="d-flex">
            <span class="label">设备状态:</span>
            <span class="val" :class="detail.deviceStatus != 1 && 'error'">{{
              detail.deviceStatus == 0 ? "正常" : "异常"
            }}</span>
          </div>
          <div class="d-flex">
            <span class="label">使用状态:</span>
            <span class="val" :class="detail.deviceStatus != 1 && 'error'">{{
              detail.useStatus == 0 ? "正常" : "已停机"
            }}</span>
          </div>
        </div>
        <!-- <div class="type-list">
          <div>
            <div class="all-item">
              <div
                class="use-item"
                :style="{ height: `${detail.hampoo}%`, background: '#fedc00' }"
              ></div>
            </div>
            <div class="type-name">洗发水</div>
          </div>
          <div>
            <div class="all-item">
              <div
                class="use-item"
                :style="{
                  height: `${detail.conditioner}%`,
                  background: '#f93c31',
                }"
              ></div>
            </div>
            <div class="type-name">护发素</div>
          </div>
          <div>
            <div class="all-item">
              <div
                class="use-item"
                :style="{
                  height: `${detail.hairtonic}%`,
                  background: '#8dc936',
                }"
              ></div>
            </div>
            <div class="type-name">养发液</div>
          </div>
          <div class="replace-btn">
            原料更换记录
            <van-icon
              name="arrow"
              class="ri-icon"
              @click="
                router.push({
                  path: '/device/record',
                  query: {
                    id: route.query.id,
                  },
                })
              "
            />
          </div>
        </div> -->
      </div>
      <div class="reset-btn" @click="endOrder">结束订单</div>
    </div>
    <div class="card-box">
      <div class="date-title">
        <div>日期筛选</div>
        <div class="date">
          <van-icon name="calendar-o" @click="show = true" />
          <div v-if="date">{{ date }}</div>
        </div>
        <van-calendar
          :min-date="new Date(2010, 0, 1)"
          allow-same-day
          v-model:show="show"
          type="range"
          @confirm="onConfirm"
        />
      </div>
      <div class="device-title">设备使用情况</div>
      <div class="table-head">
        <span></span>
        <span>使用次数</span>
        <!-- <span>洗发水</span>
        <span>护发素</span>
        <span>养发液</span> -->
        <span>耗时</span>
      </div>
      <div class="table-content">
        <div v-for="(item, index) in list" :key="item.id || index">
          <span>套餐{{ index + 1 }}</span>
          <span>{{ item.useNum }}</span>
          <!-- <span>{{ item.shampoo }}瓶</span>
          <span>{{ item.conditioner }}瓶</span>
          <span>{{ item.hairtonic }}瓶</span> -->
          <span>{{ item.time }}分</span>
        </div>
      </div>
      <div class="table-foot mt-24">
        <span>总计</span>
        <span>{{ totalMsg.totalUseNum }}</span>
        <!-- <span>{{ totalMsg.totalShampoo }}瓶</span>
        <span>{{ totalMsg.totalConditioner }}瓶</span>
        <span>{{ totalMsg.totalHairtonic }}瓶</span> -->
        <span>{{ totalMsg.totalTime }}分</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  postMpDeviceDetail,
  postMpDeviceUsage,
  postMpDeviceEndOrder,
} from "@/api/index";
import { onMounted } from "vue";
import { Notify } from "vant";
import moment from "moment";
const route = useRoute();
const router = useRouter();
const detail = ref({
  // model: "GD001BFC",
  // code: "QL001",
  // activeTime: "2020年4月18日 10:00",
  // onlineTime: "35小时50分",
  // onlineStatus: "1",
  // deviceStatus: "1",
  // type1: 60,
  // type2: 70,
  // type3: 80,
});

const startTimeVal = ref(
  moment(new Date()).startOf("day").format("YYYY-MM-DD HH:mm:ss")
);
const endTimeVal = ref(
  moment(new Date()).endOf("day").format("YYYY-MM-DD HH:mm:ss")
);
const show = ref(false);

const onConfirm = (values) => {
  const [start, end] = values;
  show.value = false;

  startTimeVal.value = moment(start)
    .startOf("day")
    .format("YYYY-MM-DD HH:mm:ss");
  endTimeVal.value = moment(end).endOf("day").format("YYYY-MM-DD HH:mm:ss");
  getUsage();
};
const date = computed(() => {
  return `${moment(startTimeVal.value).format("MM-DD")}至${moment(
    endTimeVal.value
  ).format("MM-DD")}`;
});
const list = ref([]);
const totalMsg = computed(() => {
  function getNum(key) {
    let num = 0;
    // debugger
    if (list.value?.length) {
      list.value.forEach((item) => {
        console.log("item[key]", item[key]);
        num += item[key];
      });
    }
    return num;
  }
  return {
    totalUseNum: getNum("useNum"),
    totalTime: getNum("time"),
    totalConditioner: getNum("conditioner"),
    totalHairtonic: getNum("hairtonic"),
    totalShampoo: getNum("shampoo"),
  };
});
const getUsage = () => {
  postMpDeviceUsage({
    deviceId: route.query.id,
    startTime: startTimeVal.value,
    endTime: endTimeVal.value,
  }).then((res) => {
    list.value = res.data;
  });
};
const endOrder = () => {
  postMpDeviceEndOrder({ id: detail.value.id }).then(() => {
    Notify({ type: "success", message: "结束成功" });
  });
};
onMounted(() => {
  postMpDeviceDetail({ id: route.query.id }).then((res) => {
    detail.value = res.data;
  });
  getUsage();
});
</script>

<style lang="less" scoped>
.card-box {
  border-radius: 15px;
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  margin-bottom: 30px;
  img {
    width: 350px;
    height: 150px;
    margin: 0 auto 20px;
  }
  .label {
    color: #000;
    font-size: 30px;
    margin-right: 15px;
  }
  .val {
    color: #000;
    font-size: 30px;
    &.error {
      color: #e55f6a;
    }
  }

  .type-list {
    display: flex;
    gap: 5px;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .all-item {
        background: #fffbe0;
        position: relative;
        width: 25px;
        flex: 1;
        text-align: center;
        position: relative;
      }
      .use-item {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 15px 15px 0 0;
      }
      .type-name {
        // position: absolute;
        font-size: 20px;
        // transform: scale(.7);
        zoom: 0.7;
        color: #333;
        margin-top: 5px;
      }
    }
    .replace-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 30px;
      zoom: 0.8;
      color: #faca62;
      align-self: flex-end;
      white-space: nowrap;
      margin-left: 15px;
    }
  }
  .reset-btn {
    height: 80px;
    width: 350px;
    border-radius: 40px;
    font-size: 34px;
    line-height: 80px;
    text-align: center;
    background: #fedc00;
    margin: 40px auto 0;
  }
}
.date-title,
.device-title {
  font-size: 34px;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 2px;
  position: relative;
  &.device-title {
    width: max-content;
    margin: 0 auto 25px;
    &::after {
      content: "";
      position: absolute;
      left: -10px;
      right: -10px;
      height: 5px;
      bottom: -3px;
      background: #fedc00;
    }
  }

  &.date-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .date {
      font-size: 26px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }
  }
}

.table-head,
.table-foot {
  display: grid;
  grid-template-columns: 1fr 1fr  1fr;
  font-size: 30px;
  text-align: center;
  margin-bottom: 28px;
}
.table-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ececec;
}
.table-content > div {
  display: grid;
  grid-template-columns: 1fr 1fr  1fr;
  font-size: 30px;
  text-align: center;
}
</style>
